<template>
	<view class="content">
		<!-- 收货信息表单 -->
		<u-form :model="addrForm" ref="addrForm" label-width="140rpx" :label-style="labelOptions">
			<u-form-item label="收货人" prop="name">
				<u-input v-model="addrForm.name" placeholder="请输入正确的收货人姓名" />
			</u-form-item>
			<u-form-item label="手机号" prop="phone">
				<u-input v-model="addrForm.phone" maxlength="11" placeholder="请输入收货人手机号" />
			</u-form-item>
			<u-form-item label="所在地区" prop="areaName">
				<u-input v-model="addrForm.areaName" placeholder="请选择省/市/区" type="select" :select-open="pickerVisible" @click="pickerVisible = true"/>
			</u-form-item>
			<u-form-item label="详细地址" prop="address">
				<u-input v-model="addrForm.address" type="textarea" placeholder="如道路、门牌号、小区、楼栋号、单元室等" />
			</u-form-item>
		</u-form>
		
		<!-- 是否默认 -->
		<u-form ref="switchForm" label-width="180rpx" :label-style="labelOptions">
			<u-form-item label="设为默认地址"><u-switch slot="right" v-model="addrForm.isDefault" size="40" active-color="#4DD865"></u-switch></u-form-item>
		</u-form>
		
		<!-- 删除收货地址 -->
		<view class="delete-addr" @tap="deleteAddr()" v-if="options.id">删除收货地址</view>
		
		<!-- 地址下拉选配 -->
		<u-picker mode="region" v-model="pickerVisible" @confirm="onPickerConfirm" :area-code="areaCode"></u-picker>

		<!--底部按钮组-->
		<view class="footer-bar">
			<button class="btn add" @tap="onSave()">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'addressDetail',
		data() {
			return {
				options: {},
				addrForm: {
					name: '',
					phone: '',
					areaName: '',
					areaCode: '',
					address: '',
					isDefault: false
				},
				addrRules: {
					name: [
						{
							required: true,
							min: 1,
							message: '请输入姓名',
							trigger: ['change','blur'],
						}
					],
					phone: [
						{
							validator: (rule, value, callback) => {
								let reg = /^1(((5[0-35-9][0-9])|([34879][0-9]{2}))[0-9]{7})$/;
								if (!reg.test(value)) {
									return false;
								}
								return true;
							},
							message: '请输入正确手机号',
							trigger: ['change', 'blur'],
						}
					],
					areaName: [
						{
							required: true,
							message: '请选择省市区',
							trigger: ['change','blur'],
						}
					],
					address: [
						{
							required: true,
							min: 4,
							message: '请输入详细地址',
							trigger: ['change','blur'],
						}
					]
				},
				labelOptions: {
					color: '#2B2C2E',
					fontWeight: '600'
				},
				pickerVisible: false,
				areaCode: [],
				btnLock: false
			}
		},
		onLoad(options) {
			this.options = options;
			
			// 地址详情还原
			if (options.id) {
				this.$service.order.address.info({
					id: options.id
				}).then(res => {
					this.addrForm.name = res.name;
					this.addrForm.phone = res.phone;
					this.addrForm.areaName = res.areaName;
					this.addrForm.address = res.address;
					this.addrForm.isDefault = res.isDefault === 1 ? true : false;
					
					if (Number(options.isDefault) === 1) {
						this.addrForm.isDefault = true;
					}
					
					let areaCode = res.areaCode;
					let areaArrNew = [];
					let areaArr = areaCode.split(',');
					
					areaArr.forEach(item => {
						areaArrNew.push(item.replace(/(0+)$/g,""))
					})
					this.addrForm.areaCode = areaArrNew.join(',');
					this.areaCode = areaArrNew;
				})
			}
		},
		onShow() {
			// #ifdef MP-WEIXIN
			uni.reportAnalytics('enter_shouhuodzbj');
			// #endif
		},
		onReady() {
			this.$refs.addrForm.setRules(this.addrRules);
		},
		methods: {
			// 地址选配
			onPickerConfirm(e) {
				this.addrForm.areaName = e.province.label + ' ' + e.city.label + ' ' + e.area.label;
				this.addrForm.areaCode = e.province.value + ',' + e.city.value + ',' + e.area.value;
			},
			// 删除收货地址
			deleteAddr() {
				this.$service.order.address.delete({
					ids: this.options.id
				}).then(res => {
					uni.showToast({
						title: '删除成功',
						icon: 'none'
					});
					
					setTimeout(() => {
						uni.navigateBack({
						    delta: 1
						});
					}, 2000)
				})
			},
			// 保存
			onSave() {
				// 地址转换
				let areaCode = this.addrForm.areaCode;
				let areaArrNew = [];
				let areaArr = areaCode.split(',');
				areaArr.forEach(item => {
					if (item.length < 6) {
						let len = 6 - item.length;
						for (let i=0; i<len; i++) {
							item = item + '0'
						}
					}
					areaArrNew.push(item)
				})
				this.addrForm.areaCode = areaArrNew.join(',');
				
				this.$refs.addrForm.validate(valid => {
					if (valid) {
						if (!this.btnLock) {
							this.btnLock = true;
							// 新增
							if (!this.options.id) {
								this.$service.order.address.add({
									...this.addrForm,
									isDefault: this.addrForm.isDefault ? 1 : 0
								}).then(res => {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
									this.btnLock = false;
									setTimeout(() => {
										if (this.options.source === 'auto') {
											uni.setStorageSync('address', 'success');
										}
										uni.navigateBack({
											delta: 1
										});
									}, 2000);
								}).catch(err => {
									uni.showToast({
										title: err.message,
										icon: 'none'
									});

									this.btnLock = false;
								})
							} else {
								// 修改
								this.$service.order.address.update({
									...this.addrForm,
									id: this.options.id,
									isDefault: this.addrForm.isDefault ? 1 : 0
								}).then(res => {
									uni.showToast({
										title: '保存成功',
										icon: 'none'
									});
									this.btnLock = false;
									setTimeout(() => {
										uni.navigateBack({
											delta: 1
										});
									}, 2000);
								}).catch(err => {
									uni.showToast({
										title: err.message,
										icon: 'none'
									});

									this.btnLock = false;
								})
							}
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 20rpx 0;
		/deep/.u-form {
			margin-bottom: 20rpx;
			.u-form-item {
				padding: 10rpx 24rpx;
				background: #fff;
				.u-form-item--left {
					@include flexBox(flex-start, flex-start);
				}
			}
		}
		.delete-addr {
			margin-top: 20rpx;
			background: #fff;
			padding: 24rpx;
			font-size: 28rpx;
			color: $main-color-text;
		}
		.footer-bar {
			position: fixed;
			bottom: 0;
			height: 100rpx;
			width: 100%;
			background: #fff;
			padding: 10rpx 24rpx;
			@include flexBox(center);
			.btn {
				width: 100%;
				border-radius: 50rpx;
				font-size: 32rpx;
				font-weight: 600;
				&::after {
					border: none;
				}
				&.add {
					background: $main-color;
					color: #333333;
				}
			}
		}
	}
</style>
